<script setup lang="ts">
import { inject, type Ref } from "vue";
import type { FormDesignerComponents } from "../FormComponentMixin";

const config = defineModel<FormDesignerComponents>("config");
const componentRefs = inject<Ref<object>>("componentRefs");

const onExport = () => {
  if (componentRefs && componentRefs.value) {
    Object.keys(componentRefs.value).forEach(key => {
      if (key.includes("DefTableData") && componentRefs.value[key].hasOwnProperty("exportData")) {
        componentRefs.value[key].exportData();
      }
    });
  }
};

const onRefresh = () => {
  if (componentRefs && componentRefs.value) {
    Object.keys(componentRefs.value).forEach(key => {
      if (
        key.includes("DefTableData") &&
        componentRefs.value[key].hasOwnProperty("queryTableData")
      ) {
        componentRefs.value[key].queryTableData();
      }
    });
  }
};
</script>

<template>
  <div style="display: flex; justify-content: flex-end">
    <RightToolBar
      :export="config.props.rightExport"
      :search="config.props.rightSearch"
      @export="onExport"
      @refresh="onRefresh"
    />
  </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
@mixin panel {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  min-height: $base-input-height;
  margin: #{math.div($base-margin, 2)} 0 #{math.div($base-margin, 2)} 0;
  & .el-form-item__content {
    display: flex;
    align-items: center;
  }
  & {
    > .el-button {
      margin: #{math.div($base-margin, 2)} 10px #{math.div($base-margin, 2)} 0 !important;
    }
  }
}

.query-form :deep() {
  .el-form-item:first-child {
    margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
  }

  .el-form-item + .el-form-item {
    margin: 0 0 #{math.div($base-margin, 2)} 0 !important;

    .el-button {
      margin: 0 0 0 10px !important;
    }
  }

  .left-panel {
    @include panel;
  }

  .right-panel {
    @include panel;

    & {
      justify-content: flex-end;
    }
  }
}
</style>
